/* eslint-disable */
/**
 * @Description: 在线资源数据
 * @author ourslookAdmin
 * @date 2019-04-28 14:34:08
 */
import React, {Fragment} from 'react';
import Modal from 'drag-modal';
import {
  BackTop,
  Button,
  Card,
  Checkbox,
  Col,
  DatePicker,
  Divider,
  Form,
  Icon,
  Input,
  Radio,
  Row,
  Select,
  Spin,
  Switch,
  Tooltip,
  Upload,
} from 'antd';
import {formatMessage, FormattedMessage} from 'umi/locale';
import 'antd/dist/antd.css';
import PropTypes from 'prop-types';
import {connect} from 'dva';
import {requestLists, requestPromise} from '@/utils/request';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import moment from 'moment';
import numeral from 'numeral';
import BaseForm from '../../../components/ourslook/BaseForm';
import ETable from '../../../components/ourslook/ETable';
import {getWebPath} from '../../../utils/request';
import uiUtils, {hasPermission, rulesReg} from '../../../utils/uiUtils';
import styles from '../../../utils/ourslook.less';
import DefaultImage from '../../../components/ourslook/DefaultImage';

const monthFormat = 'YYYY-MM';
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const TextArea = Input.TextArea;
const Password = Input.Password;
const CheckboxGroup = Checkbox.Group;
const {MonthPicker, RangePicker, WeekPicker} = DatePicker;

const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');

// @coming({title: '精彩即将呈现！', value: Date.now() + 1000 * 60 * 60 * 24 * 2})
@connect(() => ({}))
class OnlineRes extends React.Component {
  params = {
    page: 1,
    limit: 10,
  };

  formItemLayout = {
    labelCol: {span: 5},
    wrapperCol: {span: 19},
  };

  /**
   * https://ant-design.gitee.io/components/table-cn/
   *
   * 需要指定 column 的 width 属性，否则列头和内容可能不对齐。（必须留一列不设宽度或者minWidth以适应弹性布局）
   * 建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x, 一般无table正常展开的宽度
   * 未知长度字段或者字符特别多的字段不要放置在列表
   */
  columns = [
    {
      title: '',
      width: 30,
      align: 'center',
      fixed: 'left',
      render: (value, record, index) => index + 1,
    },
    {title: '在线资源种类', dataIndex: 'resKindName', width: 210, align: 'center', sorter: false},
    {title: '专栏名称', dataIndex: 'resColumnName', width: 210, align: 'center', sorter: false},
    {
      title: '所属日期',
      dataIndex: 'belongDate',
      width: 150,
      align: 'center',
      sorter: true,
      key: 'belong_date',
    },
    {title: '杂志期名', dataIndex: 'periodName', width: 200, align: 'center', sorter: false},
    {
      title: '费用',
      dataIndex: 'fee',
      width: 120,
      align: 'right',
      sorter: true,
      render: (value, record, index) => {
        if (value !== null && value !== undefined) {
          return `￥${numeral(value).format('0,0.00')}`;
        }
        return '-';
      },
    },
    {
      title: '资源类型',
      dataIndex: 'resType',
      width: 100,
      align: 'center',
      sorter: false,
      render: val => {
        let type = '';
        if (val === 1) {
          type = '视频';
        } else if (val === 2) {
          type = '音频';
        }
        return type;
      },
    },
    /*{
      title: '资源',
      dataIndex: 'resUrl',
      width: 50,
      align: 'center',
      sorter: false,
      render: val => {
        if (val !== undefined && val.trim() !== '') {
          return <a href={val}>查看</a>;
          // eslint-disable-next-line no-else-return
        } else {
          return '---';
        }
      },
    },*/
    {
      title: '封面',
      dataIndex: 'cover',
      width: 120,
      align: 'center',
      sorter: false,
      render: record => <DefaultImage src={record} alt="" width="100px" height="97px"/>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      sorter: false,
      render: (value, record, index) => (
        <React.Fragment>
          <div>
            <Switch
              checkedChildren="启用"
              unCheckedChildren="禁用"
              onChange={val => {
                this.setStateByTableColume(record, index);
                this.updateStatus(val);
              }}
              checked={value === 1}
            />
          </div>
        </React.Fragment>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 190,
      align: 'center',
      sorter: true,
      key: 'create_time',
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      width: 190,
      align: 'center',
      sorter: true,
      key: 'update_time',
    },
    {
      title: '操作',
      dataIndex: '',
      width: 120,
      align: 'center',
      fixed: 'right',
      render: (value, record, index) => (
        <React.Fragment>
          <a
            onClick={() => {
              this.setStateByTableColume(record, index);
              this.update();
            }}
          >
            <Tooltip title={<FormattedMessage id="ours.curd.list.edit" defaultMessage="编辑"/>}>
              <Icon type="edit"/>
            </Tooltip>
          </a>
          <Divider type="vertical"/>
          <a
            onClick={() => {
              this.setStateByTableColume(record, index);
              this.view();
            }}
          >
            <Tooltip title={<FormattedMessage id="ours.curd.list.info" defaultMessage="查看"/>}>
              <Icon type="info"/>
            </Tooltip>
          </a>
        </React.Fragment>
      ),
    },
  ];

  constructor(props) {
    super(props);
    this.state = {
      showList: 1, //1:显示列表、2:显示新增
      formList: OnlineRes.getFormList(),
      selectedRows: [],
      selectedIds: [],
      selectedIndexs: [],
      editModalTitle: null,
      editModalType: null,
      editModel: null,
      editModelConfirmLoading: false,
      //其他属性下面书写
    };
  }

  // 筛选条件
  static getFormList = () => [
    {
      type: 'INPUT',
      field: 'periodName',
      label: '杂志期名',
      placeholder: '杂志期名',
    },
    {
      type: 'INPUT',
      field: 'resKindName',
      label: '种类',
      placeholder: '种类名称',
    },
    {
      type: 'INPUT',
      field: 'resColumnName',
      label: '专栏名称',
      placeholder: '专栏名称',
    },
    {
      type: 'DATE_RANGE',
      field: 'createTime',
      label: '创建时间',
      placeholder: ['创建时间', ''],
    },
    {
      type: 'SELECT',
      field: 'resType',
      label: '资源类型',
      placeholder: '资源类型',
      initialValue: '',
      list: [{id: '', name: '请选择类型'}, {id: '1', name: '视频'}, {id: '2', name: '音频'}],
    },
    {
      type: 'INPUT_RANGE',
      field: 'fee',
      label: '费用范围',
      placeholder: ['起始费用', '结束费用'],
    },
  ];

  componentDidMount() {
    this.requestList();
  }

  componentWillUnmount() {
  }

  /**
   * 根据 formItem field 取值 查找formItem
   * @param formItemField obj的field字段
   * @returns 一个对象
   */
  findFormListItemByField = formItemField =>
    this.state.formList.find((value, index, array) => value.field === formItemField);

  query = fieldParams => {
    this.params = JSON.parse(JSON.stringify(Object.assign(this.params, fieldParams)));
    this.requestList();
  };

  add = () => {
    this.setState({
      editModalType: 'add',
      editModalTitle: formatMessage({id: 'ours.curd.list.create'}), //创建
      editModel: {},
      showList: 2,
    });
  };

  update = () => {
    const {selectedRows, selectedIds, selectedIndexs} = this.state;
    if (!selectedRows) {
      uiUtils.showAlert(formatMessage({id: 'ours.curd.show-alert.select-please'}));
      return;
    }
    if (selectedRows.length > 1) {
      uiUtils.showAlert(formatMessage({id: 'ours.curd.show-alert.select-one-please'}));
      return;
    }
    this.setState({
      editModalType: 'update',
      editModalTitle: <FormattedMessage id="ours.curd.list.edit" defaultMessage="编辑"/>,
      editModel: JSON.parse(JSON.stringify(selectedRows[0])),
      showList: 2,
    });
    this.getInfo(selectedRows[0].id);
  };

  view = () => {
    const {selectedRows, selectedIds, selectedIndexs} = this.state;
    if (!selectedRows) {
      uiUtils.showAlert(formatMessage({id: 'ours.curd.show-alert.select-please'}));
      return;
    }
    if (selectedRows.length > 1) {
      uiUtils.showAlert(formatMessage({id: 'ours.curd.show-alert.select-one-please'}));
      return;
    }
    this.setState({
      editModalType: 'view',
      editModalTitle: <FormattedMessage id="ours.curd.list.info" defaultMessage="查看"/>,
      editModel: selectedRows[0],
      showList: 2,
    });
    this.getInfo(selectedRows[0].id);
  };

  del = () => {
    const selectedRows = this.state.selectedRows;
    const ids = [];
    for (let i = 0; i < selectedRows.length; i += 1) {
      ids.push(selectedRows[i].id);
    }

    uiUtils.showConfirm(formatMessage({id: 'ours.curd.show-alert.confirm-delete'}), () => {
      this.setState({
        loading: true,
      });
      requestPromise(`${getWebPath()}busonlineres/delete`, {
        method: 'POST',
        body: ids,
      }).then(res => {
        this.setState({
          loading: false,
        });
        if (res && res.code === 0) {
          uiUtils.showMessage(
            formatMessage({id: 'ours.curd.show-alert.operate-success'}),
            'success'
          );
          this.requestList();
        }
      });
    });
  };

  saveOrUpdate = () => {
    const editModalType = this.state.editModalType;
    //不能双向绑定，这里只能原对象、新对象进行合并.
    const busOnlineRes = Object.assign(
      this.state.editModel,
      this.editForm.props.form.getFieldsValue()
    );

    this.editForm.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        // submit the values
        const url = busOnlineRes.id == null ? '/busonlineres/save' : '/busonlineres/update';
        //对象删除一个属性
        //delete busOnlineRes.xxxxPros;
        // busOnlineRes.belongDate = busOnlineRes.belongDate.format('YYYY-MM');
        busOnlineRes.belongDate = `${busOnlineRes.belongDate.format('YYYY-MM')}-01`;
        this.setState({
          editModelConfirmLoading: true,
        });
        requestPromise(getWebPath() + url, {
          method: 'POST',
          body: busOnlineRes,
        }).then(res => {
          this.setState({
            editModelConfirmLoading: false,
          });
          if (res && res.code === 0) {
            uiUtils.showMessage(
              formatMessage({id: 'ours.curd.show-alert.operate-success'}),
              'success'
            );
            this.setState({
              showList: 1,
            });

            //新增重新置为第一页
            if (!busOnlineRes.id) {
              this.params.page = 1;
            }
            this.requestList();
          }
        });
      }
    });
  };

  getInfo = id => {
  };

  setStateByTableColume = (record, index) => {
    this.state = {
      ...this.state,
      selectedRows: [record],
      selectedIds: [record.id],
      selectedIndexs: [index],
    };
  };

  updateStatus = val => {
    const {selectedRows, selectedIds, selectedIndexs} = this.state;
    if (!selectedRows) {
      uiUtils.showAlert(formatMessage({id: 'ours.curd.show-alert.select-please'}));
      return;
    }
    if (selectedRows.length > 1) {
      uiUtils.showAlert(formatMessage({id: 'ours.curd.show-alert.select-one-please'}));
      return;
    }
    let status;
    if (val) {
      status = 1;
    } else {
      status = -1;
    }
    const ids = [];
    for (let i = 0; i < selectedRows.length; i += 1) {
      ids.push(selectedRows[i].id);
    }

    this.setState({
      loading: true,
    });
    //const data = 'modelIds=' + ids.join(',') + '&status=' + status;
    const data = {
      modelIds: ids.join(','),
      status,
    };
    requestPromise(`${getWebPath()}busonlineres/operateBusOnlineResByIds`, {
      method: 'POST',
      contentType: 'application/x-www-form-urlencoded',
      body: data,
    }).then(res => {
      this.setState({
        loading: false,
      });
      if (res && res.code === 0) {
        uiUtils.showMessage(
          formatMessage({id: 'ours.curd.show-alert.operate-success'}),
          'success'
        );
        this.requestList();
      }
    });
  };

  operateByIds = status => {
    //这里处理，发布、取消发布、删除、禁用等状态操作; 参数status由调用放传入
  };

  //========其他所有的处理方法，请在按照约定进行处理==========

  /**
   * 表格 筛选和排序 回调
   */
  filtersSorterChange = tableParams => {
    this.params = JSON.parse(JSON.stringify(Object.assign(this.params, tableParams)));
    this.requestList();
  };

  requestList = () => {
    requestLists(this, `${getWebPath()}busonlineres/listVo`, this.params);
  };

  vShow = showListNum => ({display: this.state.showList === showListNum ? 'block' : 'none'});

  render() {
    const style = {
      style: {
        marginLeft: 10,
        marginTop: 10,
      },
      disabled: this.state.selectedIndexs.length <= 0,
    };

    /* eslint-disable react/jsx-no-bind */
    return (
      <PageHeaderWrapper title="">
        <Card
          bordered={false}
          style={{...this.vShow(1)}}
          className={styles.oursCard}
          bodyStyle={{padding: '20px'}}
        >
          <BaseForm
            formList={this.state.formList}
            loading={this.state.loading}
            filterSubmit={this.query}
          />

          <Fragment>
            <Button
              type="primary"
              icon="plus"
              onClick={this.add}
              hidden={!hasPermission('busonlineres:save')}
            >
              <FormattedMessage id="ours.curd.list.add" defaultMessage="新增"/>
            </Button>

            <Button
              type="danger"
              icon="delete"
              {...style}
              onClick={this.del}
              hidden={!hasPermission('busonlineres:delete')}
            >
              <FormattedMessage id="ours.curd.list.delete" defaultMessage="删除"/>
            </Button>
          </Fragment>

          <div className="content-wrap">
            <ETable
              onSelectRow={uiUtils.onSelectRow.bind(this)}
              primaryKey="id"
              selectedRows={this.state.selectedRows}
              selectedIds={this.state.selectedIds}
              selectedIndexs={this.state.selectedIndexs}
              onChange={this.filtersSorterChange}
              columns={this.columns}
              dataSource={this.state.list}
              pagination={this.state.pagination}
              loading={this.state.loading}
              scroll={{x: 1600}}
            />
          </div>
        </Card>

        <BackTop/>

        <Spin spinning={this.state.editModelConfirmLoading} delay={10}>
          {//返回null,这里对不用的组件进行销毁
            this.state.showList === 1 ? null : (
              <Card
                title={this.state.editModalTitle}
                bordered={false}
                actions={[
                  <div>
                    <React.Fragment>
                      <Button
                        type="primary"
                        hidden={this.state.editModalType === 'view'}
                        style={{marginRight: '18px'}}
                        onClick={this.saveOrUpdate}
                      >
                        <FormattedMessage id="ours.curd.add.save" defaultMessage="保存"/>
                      </Button>
                      <Button
                        style={{marginRight: '18px'}}
                        onClick={() => {
                          this.editForm.props.form.resetFields();
                          this.setState({showList: 1});
                        }}
                      >
                        <FormattedMessage id="ours.curd.add.back" defaultMessage="返回"/>
                      </Button>
                    </React.Fragment>
                  </div>,
                ]}
                style={{...this.vShow(2)}}
                bodyStyle={{padding: '20px'}}
                ref={node => {
                  this.container = node;
                }}
              >
                <EditForm
                  type={this.state.editModalType}
                  model={this.state.editModel}
                  wrappedComponentRef={inst => {
                    this.editForm = inst;
                  }}
                />
              </Card>
            )}
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default OnlineRes;

/**
 *  新增、编辑、复制、查看的Form
 */

/* eslint react/no-multi-comp:0 */
class EditForm extends React.Component {
  static propTypes = {
    type: PropTypes.string, //form类型，可选值：add（增加）、update（修改）、copy（复制）、view（查看）、
    model: PropTypes.object, //数据模型model，对应后台的model
  };

  static defaultProps = {
    type: '', //表单布局数组
    model: null,
  };

  constructor(props) {
    super(props);

    const defaultFileList = this.props.model.cover
      ? [
        {
          uid: '1',
          name: '',
          status: 'done',
          url: this.props.model.cover,
        },
      ]
      : null;
    const defaultAVFileList = this.props.model.resUrl
      ? [
        {
          uid: '1',
          name: this.props.model.resUrl.substring(this.props.model.resUrl.lastIndexOf("/") + 1),
          status: 'done',
          url: this.props.model.resUrl,
        },
      ]
      : null;

    let AVAccept = "";
    if (this.props.type === 'update') {
      if (this.props.model.resType === 1) {
        //视频
        AVAccept = '.mp4, .3gp, .m3u8'
      } else if (this.props.model.resType === 2) {
        //音频
        AVAccept = '.m4a, .aac, .mp3, .wav'
      }
    }

    this.state = {
      AVAccept:AVAccept,
      kindsTypesList: [],
      previewVisible: false, //上传文件预览
      previewImage: '', //上传文件预览
      defaultFileList, //上传文件列表
      defaultAVFileList, //上传文件列表
      fileList: defaultFileList && defaultFileList.length > 0 ? [defaultFileList[0]] : [],
      AVfileList: defaultAVFileList && defaultAVFileList.length > 0 ? [defaultAVFileList[0]] : [],
      resColumnList: [],
    };
    this.getKindsTypeList();
    this.getResColumnList();

  }

  /**
   * 生命周期-属性发生变化...componentWillReceiveProps
   * 这里的nextProps，可以获取到所有的属性。
   * 目前没用，因为 dialog 每次都被销毁了
   */
  componentWillReceiveProps(nextProps) {
  }

  getPropsByKey = prop => {
    const model = this.props.model || {};
    const finalModel = Object.assign(model, this.props.form.getFieldsValue());
    return finalModel[prop];
  };

  getKindsTypeList = () => {
    requestPromise(`${getWebPath('/busonlinereskinds/list')}`, {
      method: 'GET',
    }).then(res => {
      if (res && res.code === 0) {
        const kindsTypes = res.page.list || [];
        const newkindsTypes = [
          {id: '', name: '请选择杂志类型'},
          ...kindsTypes.map(e => ({id: e.id, name: e.name})),
        ];
        this.setState({kindsTypesList: newkindsTypes});
      }
    });
  };

  getResColumnList = () => {
    requestPromise(`${getWebPath('/busonlinerescolumn/list')}`, {
      method: 'GET',
    }).then(res => {
      if (res && res.code === 0) {
        const kindsTypes = res.page.list || [];
        const newkindsTypes = [
          {id: '', name: '请选择专栏名称'},
          ...kindsTypes.map(e => ({id: e.id, name: e.columnName, resType: e.resType})),
        ];
        this.setState({resColumnList: newkindsTypes});
      }
    });
  };
  /*上传*/

  handleUploadOnRemove = file => {
    this.setState({
      fileList: [],
      AVfileList: [],
      defaultFileList: null,
      defaultAVFileList: null,
    });
  };

  handleUploadPreview = file => {
    const previewImage = file.url || file.thumbUrl;
    const previewVisible =
      previewImage.toLowerCase().endsWith('.bpm') ||
      previewImage.toLowerCase().endsWith('.png') ||
      previewImage.toLowerCase().endsWith('.jpg') ||
      previewImage.toLowerCase().endsWith('.jpeg') ||
      previewImage.toLowerCase().endsWith('.gif') ||
      file.type.startsWith('image/');
    this.setState({
      previewImage,
      previewVisible,
    });
  };

  handleUploadOnChange = info => {
    const {loadingCallback} = this.props;
    // 状态有：uploading done error removed
    if (info.file.status === 'done') {
      //这个Upload组件比较特殊，这里在OnChange方法手工设置value,不做延迟，就设置不了被覆盖了。
      const response = info.fileList[0].response;
      this.setState({
        fileList: info.fileList,
      });
      if (response) {
        if (response.code === 0) {
          uiUtils.showMessage(`${info.file.name} 文件上传成功.`, 'success');
          setTimeout(() => {
            this.props.form.setFieldsValue({
              cover: response.object,
            });
            if (loadingCallback) {
              loadingCallback(false);
            }
          }, 500);
        } else {
          uiUtils.showAlert(response.msg, 'error');
          if (loadingCallback) {
            loadingCallback(false);
          }
        }
      }
    } else if (info.file.status === 'error') {
      if (loadingCallback) {
        loadingCallback(false);
      }
      uiUtils.showMessage(`${info.file.name} 文件上传失败.`, 'error');
    } else if (info.file.status === 'uploading') {
      if (loadingCallback) {
        loadingCallback(true);
      }
    }
  };

  handleUploadAV = info => {
    if (info.file.status === 'done') {
      if (!this.handleBeforeUpload(info.file)) {
        return;
      }
    }

    // console.log(info);
    if (info.file.status !== 'uploading') {
      // console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      const response = info.fileList[0].response;
      this.setState({
        AVfileList: info.fileList,
      });
      this.props.form.setFieldsValue({
        resUrl: response.object,
      });
    } else if (info.file.status === 'error') {
      uiUtils.showMessage(`${info.file.name} 文件上传失败.`, 'error');
    }
    this.setState({defaultAVFileList: [...info.fileList]});
  };

  handleBeforeUpload = file => {
    var flag = false;

    const currentType = this.props.form.getFieldsValue(['resType']);
    if (file === null || file === undefined) {
      this.props.form.setFieldsValue({
        resUrl: undefined,
      });
      this.setState({AVfileList: [], defaultAVFileList: []});
      uiUtils.showMessage('文件上传失败，文件格式不正确！', 'error');
      return false;
    }

    if (currentType.resType === 1 && file.type.indexOf('video') !== -1) {
      //视频
      flag = true;
    } else if (currentType.resType === 2 && file.type.indexOf('audio') !== -1) {
      //音频
      flag = true;
    } else {
      this.setState({AVfileList: [], defaultAVFileList: []});
      this.props.form.setFieldsValue({
        resUrl: undefined,
      });
      uiUtils.showMessage(' 文件上传失败，文件格式不正确！', 'error');
    }

    return flag;
  };

  render() {
    const type = this.props.type; //编辑是：新增（add）、编辑(edit)、复制(copy)、还是查看(view)
    const model = this.props.model || {};
    const {
      form,
      form: {getFieldDecorator, getFieldValue, setFieldsValue},
    } = this.props;
    const formItemLayout = {
      labelCol: {span: 5},
      wrapperCol: {span: 18}, //5+19=24,少一个栅格
    };
    const colSpanLayout = {md: 12, sm: 24}; //每一col跨?列
    const rowGutterPxLayout = {md: 24, sm: 16}; //col之间的间隔?px
    const inputCodeDisabled = {
      disabled: type === 'update',
    };

    const uploadProps = {
      action: `${getWebPath('/api/fileUpload')}`,
      name: 'myfile',
      data: {moduleName: 'online', isImage: true, acceptFileExts: 'image'},
      withCredentials: true,
      headers: {
        authorization: 'authorization-text',
      },
      onChange: this.handleUploadOnChange,
      onRemove: this.handleUploadOnRemove,
      defaultFileList: this.state.defaultFileList,
      multiple: false,
      accept: '.jpg, .jpeg, .png, .bmp, ', //image/*
    };

    const VideoOrAuProps = {
      action: `${getWebPath('/api/fileUpload')}`,
      name: 'myfile',
      data: {moduleName: 'online', isImage: false},
      headers: {
        authorization: 'authorization-text',
      },
      onChange: this.handleUploadAV,
      onRemove: this.handleUploadOnRemove,
      defaultFileList: this.state.defaultAVFileList,
      multiple: false,
      // accept: '.mp4, .3gp, .m3u8',
    };
    const uploadButton = (
      <div>
        <Icon type="plus"/>
        <div className="ant-upload-text">上传</div>
      </div>
    );

    const uploadAv = (
      <Button>
        <Icon type="upload"/> 上传
      </Button>
    );
    console.log(this.state.AVAccept);

    return (
      <Form layout="horizontal">
        <Row gutter={{...rowGutterPxLayout}}>
          <Col {...colSpanLayout}>
            <FormItem label="专栏名称" {...formItemLayout}>
              {type === 'view'
                ? model.resColumnName
                : getFieldDecorator('resColumnId', {
                  initialValue: model.resColumnId,
                  rules: [
                    {
                      required: true,
                      message: '专栏名称必选',
                    },
                  ],
                })(
                  <Select
                    placeholder="专栏名称"
                    onChange={value => {
                      const resColumnVo = this.state.resColumnList.filter(
                        (en, index) => en.id === value
                      );
                      model.resType = resColumnVo.length > 0 ? resColumnVo[0].resType : '';
                      if (model.resType === 1) {
                        //视频
                        this.setState({
                          openOrColse: false,
                          AVAccept: '.mp4, .3gp, .m3u8',
                        });
                      } else if (model.resType === 2) {
                        //音频
                        this.setState({
                          openOrColse: false,
                          AVAccept: '.m4a, .aac, .mp3, .wav',
                        });
                      }
                    }}
                  >
                    {uiUtils.getOptionList(this.state.resColumnList)}
                  </Select>
                )}
            </FormItem>
          </Col>
          <Col {...colSpanLayout}>
            <FormItem label="在线资源种类" {...formItemLayout}>
              {type === 'view'
                ? model.resKindName
                : getFieldDecorator('resKindId', {
                  initialValue: model.resKindId,
                  rules: [
                    {
                      required: true,
                      message: '在线资源种类必填',
                    },
                    rulesReg('number'),
                  ],
                })(
                  <Select placeholder="在线资源种类">
                    {uiUtils.getOptionList(this.state.kindsTypesList)}
                  </Select>
                )}
            </FormItem>
          </Col>
          <Col {...colSpanLayout}>
            <FormItem label="所属日期" {...formItemLayout}>
              {type === 'view'
                ? model.belongDate
                : getFieldDecorator('belongDate', {
                  initialValue:
                    model.belongDate === undefined
                      ? moment(new Date(), monthFormat)
                      : moment(model.belongDate, monthFormat),
                  rules: [
                    {
                      required: true,
                      message: '所属日期必填',
                    },
                  ],
                })(<MonthPicker format={monthFormat}/>)}
            </FormItem>
          </Col>
          <Col {...colSpanLayout}>
            <FormItem label="杂志期名" {...formItemLayout}>
              {type === 'view'
                ? model.periodName
                : getFieldDecorator('periodName', {
                  initialValue: model.periodName,
                  rules: [
                    {
                      required: true,
                      message: '杂志期名必填',
                    },
                    {
                      whitespace: true,
                      message: '不能包含空白符',
                    },
                    {
                      max: 128,
                      message: '最长128个字符',
                    },
                  ],
                })(
                  <Input type="text" autocomplete="off" maxlength={128} placeholder="杂志期名"/>
                )}
            </FormItem>
          </Col>
          <Col {...colSpanLayout}>
            <FormItem label="费用" {...formItemLayout}>
              {type === 'view'
                ? `￥${numeral(model.fee).format('0,0.00')}`
                : getFieldDecorator('fee', {
                  initialValue: model.fee === undefined ? 0 : model.fee,
                  rules: [
                    {
                      required: true,
                      message: '费用必填',
                    },
                    rulesReg('money_0_999999'),
                  ],
                })(
                  <Input
                    type="text"
                    autocomplete="off"
                    style={{width: 150}}
                    placeholder="费用"
                  />
                )}
              &nbsp;&nbsp;
              <Tooltip placement="right" title="单位为元，0为免费。">
                <Icon type="question-circle"/>
              </Tooltip>
            </FormItem>
          </Col>
          <Col {...colSpanLayout}>
            <FormItem label="资源类型" {...formItemLayout}>
              {type === 'view'
                ? model.resType === 1
                  ? '视频'
                  : '音频'
                : getFieldDecorator('resType', {
                  initialValue: model.resType,
                  rules: [
                    {
                      required: true,
                      message: '资源类型必填',
                    },
                  ],
                })(
                  <Select
                    disabled
                    defaultValue="音频"
                    onChange={value => {
                      //改变上传文件组件的可用状态
                      /* if (value === 1) {
                         //视频
                         this.setState({
                           openOrColse: false,
                           AVAccept: '.mp4, .3gp, .m3u8',
                         });
                       } else if (value === 2) {
                         //音频
                         this.setState({
                           openOrColse: false,
                           AVAccept: '.m4a, .aac, .mp3, .wav',
                         });
                       }*/
                    }}
                    placeholder="请选择"
                    style={{width: 120}}
                  >
                    <Option value={1}>视频</Option>
                    <Option value={2}>音频</Option>
                  </Select>
                )}
            </FormItem>
          </Col>
          <Col {...colSpanLayout}>
            <FormItem
              label="资源"
              extra={
                type !== 'view'
                  ? '请先选择资源类型。音频格式支持mp3,m4a,aac.wav,视频格式支持mp4,3gp,m3u8。大小不超过500M'
                  : ''
              }
              {...formItemLayout}
            >
              {type === 'view' ? (
                model.resType !== undefined ? (
                  model.resType === 2 ? (
                    <audio src={model.resUrl} controls>
                      你的浏览器不支持 audio 标签。
                    </audio>
                  ) : (
                    <video width="320" height="240" src={model.resUrl} controls>
                      你的浏览器不支持 video 标签。
                    </video>
                  )
                ) : (
                  ''
                )
              ) : (
                // eslint-disable-next-line
                getFieldDecorator('resUrl', {
                  initialValue: model.resUrl,
                  rules: [
                    {
                      required: true,
                      message: '资源必需上传',
                    },
                  ],
                })(
                  <div>
                    <Upload
                      disabled={model.resType === undefined || model.resType === null}
                      {...VideoOrAuProps}
                      accept={this.state.AVAccept}
                      fileList={this.state.defaultAVFileList}
                    >
                      {this.state.AVfileList && this.state.AVfileList.length >= 1 ? null : uploadAv}
                    </Upload>
                  </div>
                )
              )}
            </FormItem>
          </Col>
          <Col {...colSpanLayout}>
            <FormItem
              label="封面"
              extra="支持png、jpg、gif, 大小不超过3MB, 视频资源图片推荐尺寸：334X302，音频资源图片推荐尺寸132X132;"
              {...formItemLayout}
            >
              {type === 'view' ? (
                <img alt="" width={80} src={model.cover}/>
              ) : (
                // eslint-disable-next-line
                getFieldDecorator('cover', {
                  initialValue: model.cover,
                  rules: [],
                })(
                  <div className="clearfix">
                    <Upload
                      {...uploadProps}
                      listType="picture-card"
                      onPreview={this.handleUploadPreview}
                    >
                      {this.state.fileList && this.state.fileList.length >= 1 ? null : uploadButton}
                    </Upload>
                    <Modal
                      visible={this.state.previewVisible}
                      footer={null}
                      onCancel={() => this.setState({previewVisible: false})}
                    >
                      <img
                        alt="imgExample"
                        style={{width: '100%'}}
                        src={this.state.previewImage}
                      />
                    </Modal>
                  </div>
                )
              )}
            </FormItem>
          </Col>
          <Col {...colSpanLayout}>
            <FormItem label="状态" {...formItemLayout}>
              {type === 'view'
                ? model.status === 1
                  ? '正常'
                  : '禁用'
                : getFieldDecorator('status', {
                  initialValue: model.status === undefined ? 1 : model.status,
                  rules: [
                    {
                      required: true,
                      message: '状态必填',
                    },
                    rulesReg('number'),
                  ],
                })(
                  <RadioGroup>
                    <Radio value={1}>正常</Radio>
                    <Radio value={-1}>禁用</Radio>
                  </RadioGroup>
                )}
            </FormItem>
          </Col>
        </Row>
      </Form>
    );
  }
}

/* eslint-disable no-class-assign */
//无更多的绑定， 请用 @Form.create() 注解替换
EditForm = Form.create({})(EditForm);
